import React, { useContext } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { GlobalContext } from '../contexts/GlobalContext';

const items = [
  {
    label: '退出登录',
    key: '0',
  },
  {
    label: '个人中心',
    key: '1',
  },
];

const App = () => {
  const navigate = useNavigate();
  const globalContext = useContext(GlobalContext);
  const onClick = ({ key }) => {
    // 退出登录事件处理
    if (key === '0') {
      globalContext.dispatch({ type: 'logout' });
      navigate('/login');
    }
  };
  return (
    <Dropdown menu={{ items, onClick }} trigger={['click']}>
      <Space style={{ color: '#fff' }}>
        {globalContext.user.username}
        <DownOutlined />
      </Space>
    </Dropdown>
  );
};
export default App;
